<template>
	<view>
		<view class="" style="text-align: center;">
			<text>签名区</text>
		</view>
		<view class="can">
			<canvas id="can" canvas-id="can" ref="canvas" class="jSignature" tabindex="0"
				@mousedown.prevent="onMouseDown" @mousemove="onMousemove" @mouseup="onmouseup" @mouseout="onmouseout"
				@setCapture="a" @touchmove='move' @touchstart='start($event)' @touchend='end' @touchcancel='cancel'
				@longtap='tap' disable-scroll='true' @error='error' />
		</view>
		<view class="sub_btn">
			<button @click="sub_autograph" type="primary">确认</button>

		</view>
		<view class="sub_btn">
			<button @click="clearClick" type="warn">清除</button>

		</view>


	</view>
</template>

<script>
	var that;// 当前页面对象
	var vk; //vk依赖
	
	var touchs = [];
	var testNode;
	var canvasw = 0;
	var canvash = 0;
	export default {
		data() {
			return {
				ctx: null,
				touchs: [],
				bool: false,
				obj: ''
			}
		},
		onLoad: function(options) {
			that = this;
			vk = that.vk
			that.options = options
		},
		onReady:function(){
			
		},
		mounted: function() {
			testNode = document.getElementById('can');
			this.ctx = uni.createCanvasContext('can')
			let content = this.ctx
			content.setStrokeStyle("#000")
			//设置线的宽度
			content.setLineWidth(3)
			//设置线两端端点样式更加圆润
			content.setLineCap('round')
			//设置两条线连接处更加圆润
			content.setLineJoin('round')
		},
		methods: {
			onMouseDown(res) {
				let ctx = this.ctx

				//获取触摸开始的 x,y
				ctx.beginPath();
				let point = {
					x: res.clientX - this.offsetLeft,
					y: res.clientY - this.offsetTop
				}
				// console.log(point)
				touchs.push(point);
				this.bool = true
			},
			onMousemove(res) {

				if (this.bool) {
					let point = {
						x: res.clientX - testNode.offsetLeft,
						y: res.clientY - testNode.offsetTop,
					}
					// console.log(point)
					touchs.push(point)
					if (touchs.length >= 2) {
						this.draw(touchs)
					}

				}
			},
			onmouseup(e) {
				let ctx = this.ctx
				ctx.closePath()
				this.bool = false
				this.isEnd = true
				for (let i = 0; i < touchs.length; i++) {
					touchs.pop()
				}
			},
			onmouseout() {
				let ctx = this.ctx
				ctx.closePath()
				this.bool = false
				this.isEnd = true
			},
			// 画布的触摸移动开始手势响应
			start: function(event) {
				//获取触摸开始的 x,y

				let point = {
					x: event.changedTouches[0].x,
					y: event.changedTouches[0].y
				}
				// console.log(point)
				touchs.push(point);

			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y,
				}
				// console.log(point)
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},

			// 画布的触摸移动结束手势响应
			end: function(e) {
				// console.log("触摸结束" + e)
				// 设置为已经签名
				this.isEnd = true
				this.bool = false

				// 清空轨迹数组
				for (let i = 0; i < touchs.length; i++) {
					touchs.pop()
				}

			},

			// 画布的触摸取消响应
			cancel: function(e) {
				console.log("触摸取消" + e)
			},

			// 画布的长按手势响应
			tap: function(e) {
				// console.log("长按手势" + e)
			},
			error: function(e) {
				// console.log("画布触摸错误" + e)
			},

			clearClick: function() {
				let cans = document.getElementById('can')
				canvasw = cans.clientWidth
				canvash = cans.clientHeight
				// 设置为未签名
				let content = this.ctx
				this.isEnd = false
				this.calcel_text = '取消'
				//清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)

			},
			// 绘制
			draw(touchs) {
				// console.log(touchs)
				let content = this.ctx
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			sub_autograph() {
				if (!this.isEnd) {
					uni.showToast({
						icon: 'none',
						title: '请先进行签名！'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '是否提交电子签名至云端?',
					success: (res) => {
						if (res.confirm) {
							
							this.upload()
						}
					}
				})

			},
			upload(){
				uni.canvasToTempFilePath({
					canvasId: 'can',
					success: (data) => {
						// console.log(res.tempFilePath)
						console.log(data)
						vk.pubfn.base64ToFile({
						  base64: data.tempFilePath,
						  success: (file) => {
								console.log(file)
								uni.uploadFile({
									url:this.baseUrl + '/common/upload',
									filePath:file.path,
									success: (res) => {
										let data = JSON.parse(res.data)
										if(data.code == 200){
											vk.setVuex('$app.autographStu',data.fileName)
											vk.toast('上传成功','success',800);
											setTimeout(()=>{
												vk.navigateBack();
											},850)
										}
										
									},
									fail: (err) => {
										vk.alert(err);
									}
								})
								
								
						  }
						});
					}
				})
				
			}


		}
	}
</script>

<style>
	page {}

	.can {
		display: flex;
		justify-content: center;
	}

	.jSignature {
		/* margin:10px 0px; */
		display: flex;
		border: 1px dashed #aaa;
		/* max-width: 320px; */
		width: 100vw;
		height: 160px;
		/* max-height: 426px; */
		max-width: 380px;
		touch-action: none;
		background-color: rgb(246, 246, 246);
		display: block;
		outline: none;
	}

	.sub_btn {


		margin-top: 20px;
		display: flex;
		justify-content: center;
		padding: 0 20px;
	}

	.sub_btn button {
		width: 100vw;
		max-width: 380px;
	}
</style>
